
.el-button [class*=el-icon-]+span, .el-button [class*=el-ksd-icon]+span {
  margin-left: 2px;
}
// .el-button {
//   border-radius: 6px;
//   padding: 4px 15px;
  
//   i {
//     vertical-align: middle;
//   }
//   span {
//     vertical-align: middle;
//     line-height: 22px;
//   }
//   &.icon-bg {
//     padding: 2px 4px;
//     font-size: 16px;
//     background-color: #133752;
//     i {
//       color: $--mian-color;
//     }
//   }

//   &:focus {
//     border-color: $--menu-active-color;
//     background: inherit;
//     color: $--menu-active-color;
//   }

//   &--text{
//     color: $--menu-active-color;
//   }

//   &.el-button--primary{
//     background-color: $--menu-active-color;
//     border-color: $--menu-active-color;

//     &:hover{
//       background-color: #3c89e8;
//       border-color: #3c89e8;
//     }

//     &:focus {
//       background-color: $--menu-active-color;
//       border-color: $--menu-active-color;
//       color: $--mian-color;
//     }
//   }
  
// }
.el-dialog {
  border-radius: 10px;
  background-color: $--color-nav;
  
  .el-dialog__header {
    padding: 24px 24px 0;
    font-weight: 600;
    min-height: 18px;

    .el-dialog__title{
      color: $--mian-color;
    }
  }
  .el-dialog__body {
    padding: 24px;
    color: $--mian-color;
  }
  .el-dialog__footer {
    padding: 0 24px 24px;
  }
}

.el-form-item:last-of-type {
  margin-bottom: 0px;
}
.el-form--label-top .el-form-item__label {
  line-height: 14px;
  padding: 0px 0px 8px;
}
.el-form-item__label {
  color: $--mian-color;
}

// .el-tabs--card > .el-tabs__header {
//   background-color: $--background-color-secondary;
//   .el-tabs__item.is-active {
//     background-color: $--color-white;
//   }
// }
.el-tabs {
  > .el-tabs__header {
    background-color: $--color-nav;
    border-color: $--line-border-color;
    margin: 0;
    .el-tabs__item {
      font-weight: normal;
      box-shadow: none !important;
      border-radius: 0 !important;
      border-color: $--line-border-color;
      color: $--mian-color;
      &:not(.is-active) {
        &:hover {
          color: $--menu-active-color;
        }
      }
      &.is-active {
        background-color: $--color-nav;
        border-color: $--line-border-color;
        color: $--menu-active-color;
        border-radius: 4px 4px 0 0;
        border-bottom: 2px solid $--menu-active-color;
      }
    }

    .el-tabs__nav{
      border-color: $--line-border-color;
    }
  }
  &.tabs_button {
    .el-tabs__nav-wrap::after {
      height: 0px;
    }
    > .el-tabs__header {
      // border: none;
      // height: 28px;
      // font-size: 12px;
      // display: inline-block;
      margin: 0;
      .el-tabs__nav {
        margin: 10px 0;
      }
      .el-tabs__active-bar {
        height: 0px;
      }
      .el-tabs__item {
        margin-left: 10px;
        padding: 0px 5px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        border: 1px solid $--line-border-color;
        border-radius: 4px !important;
        &:not(.is-active) {
          &:hover {
            color: $--menu-active-color;
            border-color: $--menu-active-color;
          }
        }
        &.is-active {
          background-color: $--menu-active-color;
          color: $--mian-color;
        }
      }
    }
  }
}
.el-tooltip__popper {
  max-width: 300px;
  &.is-light {
    .popper__arrow {
      border-top-color: $--color-white !important;
    }
    background: $--tooltip-color;
    border: 1px solid $--tooltip-color;
    color: $--color-text-primary;
    box-shadow: 0px 4px 12px rgba(48, 70, 103, 0.32);
  }
}
.el-tag {
  padding: 1px 5px;
  font-size: 14px;
  line-height: 22px;
  height: 26px;
  border-color: $--color-primary-light-9;
  &.el-tag--success {
    border-color: $--color-success-lighter;
  }
  &.el-tag--info {
    border-color: $--color-info-lighter;
    .el-tag__close {
      color: $--color-info-light;
    }
  }
  &.el-tag--danger {
    border-color: $--color-danger-lighter;
  }
}
.el-select {
  width: 100%;
  .el-tag__close.el-icon-close {
    background-color: transparent;
  }
}

.el-message-box {
  padding-bottom: 15px;
  background-color: $--color-nav;
  border-color: $--color-nav;

  .el-message-box__title, .el-message-box__content{
    color: $--mian-color;
  }

  // &.centerButton {
  //   .el-message-box__btns {
  //     display: flex;
  //     .el-button {
  //       flex: 1;
  //     }
  //   }
  // }
}

.el-table {
  // margin: 5px 0px;
  color: $--mian-color;
  background-color: inherit;

  .el-table__body {
    tr:hover {
      td.el-table__cell {
        background-color: $--menu-active-bg-color;
      }
    }
  }

  thead{
    color: $--mian-color;
  }

  .el-table__cell {
    padding: 0;
    height: 40px;
    background-color: $--color-nav;
  }

  th{
    &.el-table__cell{
      background-color: $--table-header-bg-color;
    }
  }

  td.el-table__cell,
  th.el-table__cell.is-leaf {
    border-bottom: 1px solid $--line-border-color;
  }

  &::before {
    background-color: $--mian-bg-color;
  }

  .el-table__empty-block{
    background-color: $--color-nav;
  }
  
  .danger { 
    color: $--danger-color 
  }
}

.el-select:hover {
  .el-input__inner{
    border-color: #3c89e8;
  }
}


.el-select-dropdown, .el-cascader__dropdown{
  background-color: $--color-nav;
  border-color: $--color-nav;
  border-radius: 4px;
  box-shadow: 0px 2px 6px 2px $--box-shadow-color;
}

.el-scrollbar__wrap{
  margin-bottom: -17px !important;
}

.el-select-dropdown__item, .el-cascader-node:not(.is-disabled){
  color: $--mian-color;
  border-radius: 4px;
  margin: 0 2px;
}
.el-select-dropdown__item.hover, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected, .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
  background: $--hover-bg-color;
}

.el-popper[x-placement^=bottom] .popper__arrow, .el-select-dropdown.el-popper .popper__arrow, .el-cascader__dropdown.el-popper .popper__arrow{
  border-bottom-color: $--color-nav;
  &::after{
    border-bottom-color: $--color-nav;
    border-top-color: $--color-nav;
  }
}


.el-cascader__dropdown{
  .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path{
    color: $--mian-color;
  }
  .el-cascader-menu{
    border-color: $--line-border-color;
  }
}




.el-radio, .el-checkbox{
  color: $--mian-color;
}

.el-pagination{
  &.is-background{
    background: $--color-nav;
    box-shadow: 0px -3px 6px -3px rgb(51, 51, 51);
    padding: 6px 5px;

    .el-pager li, .btn-prev, .btn-next{
      background-color: inherit;
      border: 1px solid;
      border-color: $--line-border-color;
      color: $--mian-color;
      font-weight: normal;
    }
    .el-pager li{
      &:not(.disabled).active{
        background-color: inherit;
        border-color: #1677ff;
        color: #1677ff;
      }

      &:hover{
        border-color: #1677ff;
      }
    }
  }
  .el-pagination__total, .el-pagination__jump{
    color: $--mian-color;
  }
}

.el-form{
  background-color: $--color-nav;
  .el-form-item__content, .el-form-item__label{
    line-height: 36px;
  }
}

.el-button {
  border-radius: 6px;
  padding: 4px 15px;
  
  i {
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
    line-height: 22px;
  }
  &.icon-bg {
    padding: 1px 3px;
    font-size: 16px;
    background-color: #133752;
    border-radius: 4px;
    vertical-align: text-bottom;
    i {
      color: $--mian-color;
      font-size: 12px;
    }
  }

  &--text{
    color: $--menu-active-color;
  }

  &--default{
    &:focus {
      border-color: $--menu-active-color;
      background: inherit;
      color: $--menu-active-color;
    }
  }

  &--primary{
    background-color: $--menu-active-color;
    border-color: $--menu-active-color;

    &:hover{
      background-color: #3c89e8;
      border-color: #3c89e8;
    }

    &:focus {
      background-color: $--menu-active-color;
      border-color: $--menu-active-color;
      color: $--mian-color;
    }
  }

  &.is-disabled{
    background-color: $--input-disabled-color;
    border-color: $--submenu-bg-color;
  }
  
}


.el-checkbox__inner, .el-input__inner, .el-button--default, .el-textarea__inner, .el-radio__inner{
  background-color: $--color-nav;
  border-color: $--line-border-color;
  color: $--mian-color;
  
  &:hover{
    border-color: $--menu-active-color;
    // background: inherit;
    color: $--menu-active-color;
  }
}

.el-input__inner, .el-textarea__inner, .el-range-input{
  background-color: $--menu-active-bg-color;
  &:hover{
    color: $--mian-color
  }
}

.el-input__inner{
  height: 34px;
}

.el-button--default{
  &:hover{
    background: inherit;
  }
}

.el-tree{
  background-color: $--color-nav;
  color: $--mian-color;

  .el-tree-node__content {
    height: 34px;
  
    &:hover {
      background-color: #263145;
    }
  }
  .el-tree-node.is-current>.el-tree-node__content{
    background-color: $--menu-active-bg-color;
  }
  .el-tree-node:focus>.el-tree-node__content{
    background-color: $--color-nav;
  }
}

.el-input-group__append, .el-checkbox__input.is-disabled .el-checkbox__inner{
  background-color: $--color-nav;
  border-color: $--line-border-color;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner{
  background-color: $--menu-active-color;
  border-color: $--menu-active-color;
}

.el-input.is-disabled .el-input__inner{
  background-color: $--input-disabled-color;
  border-color: $--submenu-bg-color;
}

.el-popover, .el-tabs--border-card, .popup-main, .el-input-number__decrease, .el-input-number__increase, .el-tag.el-tag--info, .el-popper{
  background-color: $--color-nav;
  border-color: $--color-nav;
}

.el-picker-panel{
  color: $--mian-color;

  .el-date-range-picker__content{
    &.is-left {
      border: none;
    }
    .el-date-table{
      th {
        border: none;
        color: $--mian-color;
      }
      td.next-month, td.prev-month{
        color: #606266;
      }
    }
    .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div{
      background: #263145;
    }
  }

  &__icon-btn{
    color: #bbb;
  }
}
